---
title: Router UI
description: An Expo Router submodule that provides headless tab components to create custom tab layouts.
sourceCodeUrl: 'https://github.com/expo/expo/tree/main/packages/expo-router'
packageName: 'expo-router'
platforms: ['android', 'ios', 'tvos', 'web']
isNew: true
---

import { BookOpen02Icon } from '@expo/styleguide-icons/outline/BookOpen02Icon';

import APISection from '~/components/plugins/APISection';
import { BoxLink } from '~/ui/components/BoxLink';
import { ConfigPluginExample } from '~/ui/components/ConfigSection';

`expo-router/ui` is a submodule of `expo-router` library and exports components and hooks to build custom tab layouts, rather than using the default [React Navigation](https://reactnavigation.org/) navigators provided by `expo-router`.

> See the [Expo Router](./router) reference for more information about the file-based routing library for native and web app.

## Installation

To use `expo-router/ui` in your project, you need to install `expo-router` in your project. Follow the instructions from the Expo Router's installation guide:

<BoxLink
  title="Install Expo Router"
  description="Learn how to install Expo Router in your project."
  href="/router/installation/"
  Icon={BookOpen02Icon}
/>

## Configuration in app config

If you are using the [default](/more/create-expo/#--template) template to create a new project, `expo-router`'s [config plugin](/config-plugins/introduction/) is already configured in your app config.

<ConfigPluginExample>

```json app.json
{
  "expo": {
    "plugins": ["expo-router"]
  }
}
```

</ConfigPluginExample>

## Usage

For information about using `expo-router/ui` in Custom tab layouts guide:

<BoxLink title="Custom tab layouts" Icon={BookOpen02Icon} href="/router/advanced/custom-tabs/" />

## API

```js
import { Tabs, TabList, TabTrigger, TabSlot } from 'expo-router/ui';
```

<APISection packageName="expo-router-ui" apiName="Tabs" />
